<template>
  <div id="echarts_mains" />
</template>
<script>
import echarts from 'echarts'
// import { getReport } from '@/api/report.js'
export default {
  props: ['mainWidth', 'mainHeight', 'warningData'],
  data() {
    return {
      flag: false, // 判断图标渲染结束
      allWarnEcharts: null,
      list: {
        data: [],
        num: []
      }

    }
  },
  watch: {
    mainWidth(n) {
      if (this.allWarnEcharts && this.flag) {
        this.allWarnEcharts.resize()
      }
    },
    mainHeight(n) {
      if (this.allWarnEcharts && this.flag) {
        this.allWarnEcharts.resize()
      }
    },
    warningData(n) {
      const a = []
      const b = []
      n.forEach(it => {
        a.push(it.count)
        b.push(it.days.split(' ')[0].split('-')[1] + '-' + it.days.split(' ')[0].split('-')[2])
      })
      this.list.data = b
      this.list.num = a
      this.initEcharts()
    }
  },
  mounted() {
    // getReport({
    //   size: 5
    // }).then(res => {
    //   const aTime = []
    //   const all = []

    //   res.data.dianNumVos.forEach(item => {
    //     aTime.push(item.createTime.split(' ')[0])
    //     all.push(item.num)
    //   })
    //   res.data.zhongNumVos.forEach((item, index) => {
    //     all[index] += Number(item.num)
    //   })
    //   this.list.data = aTime
    //   this.list.num = all
    //   this.initEcharts()
    // })

  },
  methods: {
    initEcharts() {
      this.allWarnEcharts = echarts.init(document.getElementById('echarts_mains'))
      this.allWarnEcharts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          scale: true,
          data: this.list.data,
          axisLine: {
            lineStyle: {
              // color: '#314155'
              color: '#x41BDFF'
            }

          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              // color: '#314155'
              color: '#314155'
            }
          },
          type: 'value',

          axisLine: {
            lineStyle: {
              // color: '#314155'
              color: '#41BDFF'
            }
          }
        },
        series: [{
          itemStyle: { // 拐点样式
            color: '#FF6A00',
            borderWidth: 12,
            borderType: 'solid',
            borderColor: 'rgba(255,106,0,0.5)'

          },
          animationDuration: 1000,
          showSymbol: false, // 去掉点
          hoverAnimation: true, // hover样式
          smooth: true, // 圆滑
          data: this.list.num,
          type: 'line',
          areaStyle: {
            color: '#FF6A00',
            opacity: 0.1
          },
          lineStyle: {
            color: '#FF6A00'
          }
        }]
      })
      this.allWarnEcharts.on('finished', () => {
        this.flag = true
      })
      this.$emit('allWarnEcharts', this.allWarnEcharts)
    }
  }
}

</script>

<style lang="scss" scoped>
  #echarts_mains {
    margin-top: 0.1rem;
    height: 105%;
    width: 100%;
  }

</style>
